<template>
  <div class="table">
    <!-- 搜索框 -->
    <search
      v-if="!isSearch"
      :search="searchs"
      @get-list="getList"
      @init-params="initParams()"
    >
      <slot slot="param" name="param" />
      <slot slot="button" name="button">
        <el-button v-if="otherShow" type="success" @click="$emit('add-list')">添加</el-button>
      </slot>
    </search>
    <!-- 列表 -->
    <div class="table-box">
      <el-table
        v-loading="loading"
        border
        :data="[...lists, ...list]"
        :header-cell-style="headerCellStyle"
        style="width: 100%"
        header-align="center"
      >
        <template v-for="(item, index) in listHedar">
          <el-table-column
            :key="item.prop + index"
            :prop="item.prop"
            :label="item.label"
            :fixed="item.fixed"
            align="center"
          >
            <slot v-if="item.isTemplate" slot-scope="scope" :name="item.prop" :value="scope.row" />
            <span v-else-if="item.show">
              {{ typeof item.show === 'function' ? item.show(scope.row, item.prop) : item.show[scope.row[item.prop]] || item.show['default']}}
            </span>
            <span v-else>{{scope.row[item.prop]}}</span>
          </el-table-column>
        </template>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :current-page.sync="pageParams.current"
        :page-sizes="[10,20, 50, 100]"
        :page-size="pageParams.size"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { asyncApiFun } from '@/utils/utils'
import search from './search.vue'
export default {
  components: {
    search
  },
  props: {
    // 是否显示search组件
    isSearch:{
      type:Boolean,
       default: false
    },
    otherShow: {
      type: Boolean,
      default: false
    },
    lists: {
      type: Array,
      default() {
        return []
      }
    },
    apiFunction: {
      type: Function,
      default: () => console.log('请求列表')
    },
    params: {
      type: Object,
      default() {
        return {}
      }
    },
    searchs: {
      type: Array,
      default() {
        return []
      }
    },
    listHedar: {
      type: Array,
      default() {
        return []
      }
    },
    setListData: {
      type: Function,
      default: list => list
    }
  },
  data() {
    return {
      loading: false,
      total: 0,
      list: [],
      pageParams: {
        current: 1,
        size: 20
      },
      headerCellStyle: {
        background: '#eef1f6',
        color: '#606266'
      }
    }
  },
  computed: {
    _setListData() {
      return this.setListData
    },
    getParams() {
      return this.params
    },
    apiFun() {
      return this.apiFunction
    }
  },
  created() {
    this.getList()
  },
  methods: {
    clearParams() {
      // 重置列表参数
      this.pageParams = {
        current: 1,
        size: 20
      }
       this.getList()
    },
    handleSizeChange(size) {
      this.pageParams.size = size
      this.getList()
    },
    handleCurrentChange(page) {
      this.pageParams.current = page
      this.getList()
    },
    initParams() {
      this.pageParams.current = 1
      this.$emit('init-params', {})
      this.getList()
    },
    getList(param) {
      if (param) {
        this.$emit('init-params', param)
        this.pageParams.current = 1
      }
      this.loading = true
      this.$nextTick(async() => {
        const params = {
          ...this.pageParams,
          ...param,
          ...this.getParams
        }
        const [res] = await asyncApiFun(this.apiFun, params)
        if (res) {
          this.loading = false
          this.total = res.data.total
          this.list = this._setListData(res.data.list ? res.data.list : res.data)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
    .table{
        padding:15px;
    }
    .search-box{padding: 22px;border-radius: 4px;}
    .el-pagination{
        margin-top: 15px;
        margin-bottom: 15px;
        text-align: right;
    }
</style>
